import React, { useEffect, useRef } from 'react'

const ScreenShareImage: React.FC<{ buffer: ArrayBuffer; width: number; height: number }> = ({ buffer, width, height }) => {
  if (!buffer.byteLength) return null
  const REF = useRef<HTMLCanvasElement | null>(null)
  useEffect(() => {
    if (!REF.current) return
    REF.current.width = width
    REF.current.height = height
    REF.current.style.background = '#fefefe'
    const imgData = new ImageData(new Uint8ClampedArray(buffer), width, height)
    REF.current?.getContext('2d')?.putImageData(imgData, 0, 0)
  }, [REF])
  return <canvas ref={REF} />
}

export default ScreenShareImage
